<script lang="ts">
  import { onMount } from 'svelte';
  import * as echarts from 'echarts';

  let chartDom: HTMLDivElement;
  let myChart: echarts.ECharts;

  const option = {
    series: [
      {
        name: '内环',
        type: 'pie',
        radius: ['52%', '88%'],
        center: ['50%', '50%'],
        label: {
          show: true,
          position: 'center',
          formatter: '单位: 个',
          fontSize: 12,
        },
        itemStyle: {
          borderWidth: 6,
          borderColor: '#021120',
        },
        data: [
          { value: 25, itemStyle: { color: '#5470c6' } },
          { value: 25, itemStyle: { color: '#91cc75' } },
          { value: 25, itemStyle: { color: '#fac858' } },
          { value: 25, itemStyle: { color: '#ee6666' } }
        ]
      },
      {
        name: '中环',
        type: 'pie',
        radius: ['82%', '92%'],
        center: ['50%', '50%'],
        label: {
          show: false
        },
        itemStyle: {
          borderWidth: 4,
          borderColor: '#021120',
        },
        data: [
          { value: 25, itemStyle: { color: '#5470c6' } },
          { value: 25, itemStyle: { color: '#91cc75' } },
          { value: 25, itemStyle: { color: '#fac858' } },
          { value: 25, itemStyle: { color: '#ee6666' } }
        ]
      },
      {
        name: '外环',
        type: 'pie',
        radius: ['98%', '98.1%'],
        center: ['50%', '50%'],
        label: {
          show: false
        },
        // itemStyle: {
        //   color: 'transparent',
        //   borderType: 'dashed',
        //   borderWidth: 1,
        //   borderColor: '#1890ff'
        // },
        data: [{
          value: 100,
          itemStyle: {
            borderColor: '#0B618D',
            borderWidth: 1,
            borderType: 'dashed'
          }
        }]
      }
    ]
  };

  onMount(() => {
    myChart = echarts.init(chartDom);
    myChart.setOption(option);

    const resizeHandler = () => {
      myChart?.resize();
    };
    window.addEventListener('resize', resizeHandler);

    return () => {
      window.removeEventListener('resize', resizeHandler);
      myChart?.dispose();
    };
  });
</script>

<div class="w-[104px] h-[104px]" bind:this={chartDom}></div> 